<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="品名" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-form-item label="助记符" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="商品类别" prop="name">
            <el-select v-model="ruleForm.value" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-form-item label="品牌" prop="name">
            <el-select v-model="ruleForm.value" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="大单位" prop="name">
            <el-select v-model="ruleForm.value" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-form-item label="条码" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="大单位" prop="name">
            <el-select v-model="ruleForm.value" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-form-item label="条码" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-button class="listis" type="primary" plain>立即提交</el-button>
      <el-button type="warning" plain>重置</el-button>
    </el-row>
  </el-form>
</template>
<style  lang="scss" scoped>
.titleh1 {
  line-height: 50px;
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 15px;
  code {
    width: 5px;
    height: 20px;
    background-color: #ff7f21;
    float: left;
    margin-right: 5px;
    margin-top: 13px;
  }
}
.el-autocomplete {
  width: 81%;
}
.el-cascader {
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.listis{
  margin-left:23px;
}
</style>
<script>
import { regionDataPlus } from 'element-china-area-data'
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        value: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        date2: [
          {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        type: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个活动性质',
            trigger: 'change'
          }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
      },
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: ''
    }
  }
}
</script>
